<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 1263px;
            position: relative;
        }
        .myHead{
            width: 1263px;
            height: 140px;
            background-image: url('images/head.jpg');
            position: absolute;
        }
        .input1{
            height: 32px;
            width: 211px;
            position: absolute;
            top:51px;
            left: 964px;
            font-size:10pt;
            font-family: 宋体;
            padding-left: 18px;
        }
        .input2{
            height: 37px;
            width: 48px;
            position: absolute;
            top:50px;
            left: 1202px;
            font-weight: 500;
            font-family:"Microsoft YaHei";
        }
        .froms{
            width: 1232px;
            height: 40px;
            padding-top: 10px;
            padding-bottom: 13px;
            position: absolute;
            top:140px;
            left:15px;
        }
        .font1{
            font-size: 16px;
            font-family: microsoft yahei;
            text-align: center;
            line-height: 35px;
            color: #646465;
        }
        .from{
            width: 112px;
            height: 40px;
            position: absolute;
            list-style: none;
            cursor: pointer;
        }
        .from-li{
            width: 108px;
            height: 40px;
            list-style: none;
            font-size: 14px;
            line-height: 40px;
            background-color: rgb(11,98,193);
            color: white;
        }
        .from-li:hover{
            background-color: rgb(62,162,237);
            color: white;
        }
        .ul1{
            display: none;
        }
        .ul2{
            display: none;
        }
        .ul3{
            display: none;
        }
        .ul4{
            display: none;
        }
        .ul5{
            display: none;
        }
        .ul6{
            display: none;
        }
        .ul7{
            display: none;
        }
        .ul8{
            display: none;
        }
        .ul9{
            display: none;
        }
        .ul10{
            display: none;
        }
        .from1{
            left:0px;
        }
        .from2{
            left:112px;
        }
        .from3{
            left:224px;
        }
        .from4{
            left:336px;
        }
        .from5{
            left:448px;
        }
        .from6{
            left:560px;
        }
        .from7{
            left:672px;
        }
        .from8{
            left:784px;
        }
        .from9{
            left:896px;
        }
        .from10{
            left:1008px;
        }
        .from11{
            left:1120px;
        }
        .picture1{
            width: 1232px;
            height: 360px;
            position: absolute;
            top:203px;
            left:15px;
        }
        .table{
            height: 750px;
            width: 1200px;
            position: absolute;
            top:583px;
            left: 31px;
        }
        .title1{
            width: 93px;
            height: 34px;
            font-size: 18px;
            font-weight: bold;
            color:#5e5e5e;
            line-height: 20px;;
            position: absolute;
            left:0px;
            top:0px;
        }
        .title2{
            width: 792px;
            height: 34px;
            font-size:13px;
            line-height: 20px;
            color: #458cd1;
            position: absolute;
            top:0px;
            left:93px;
        }
        .icon{
            width: 21px;
            height: 34px;
            background-image: url('images/icon.jpg');
            position: absolute;
            top:0px;
            left:885px;
            cursor: pointer;
        }
        .picture2{
            height: 276px;
            width: 420px;
            position: absolute;
            top:34px;
            cursor: pointer;
        }
        .b{
            height: 26px;
            width: 138px;
            position: absolute;
            top: 284px;
            left:280px;
            opacity: 100%;
            font-size: 15px;
            text-align: center;
            line-height: 26px;
        }
        .bu{
            height: 26px;
            width: 25px;
            color: white;
            background-color: rgb(102,102,102);
            opacity: 0.3;
            border-radius: 25%;
            cursor: pointer;
            position: absolute;
        }
        .b1{
            left: 0px;
            background-color:rgb(241,123,10);
        }
        .b2{
            left: 28px;
        }
        .b3{
            left: 56px;
        }
        .b4{
            left: 84px;
        }
        .b5{
            left: 112px;
        }
        .text0{
            height: 36px;
            width: 420px;
            position: absolute;
            top:310px;
            font-size:12px;
            font-weight: bold;
            line-height: 220%;
            color:#222222;
        }
        .text1{
            border-top: 2px solid #1e5fc2;
            height: 312px;
            width: 462px;
            position: absolute;
            top:34px;
            left:444px;
        }
        .text2{
            height: 254px;
            width: 442px;
            position: absolute;
            left:15px;
            top:2px;
        }
        .font2{
            height: 43px;
            width: 400px;
            font-size: 15px;
            line-height: 43px;
            font-family: 'microsoft yahei';
            color: #222222;
            display: inline-block;
            cursor: pointer;
        }
        .font2:hover{
            color:rgb(195, 4, 4);
        }
        .font3{
            height: 23px;
            width: 33px;
            font-size: 12px;
            color: #a2a2a2;
            line-height: 43px;
        }
        .tool{
            height: 280px;
            width: 274px;
            position: absolute;
            top:34px;
            left:926px;
        }
        .button1{
            width: 274px;
            height: 62px;
            position: absolute;
            background-image: url('images/button1.jpg');
            top:4px;
            cursor: pointer;
        }
        .button2{
            width: 274px;
            height: 62px;
            position: absolute;
            background-image: url('images/button2.jpg');
            top:74px;
            cursor: pointer;
        }
        .button3{
            width: 274px;
            height: 62px;
            position: absolute;
            background-image: url('images/button3.jpg');
            top:144px;
            cursor: pointer;
        }
        .button4{
            width: 274px;
            height: 62px;
            position: absolute;
            background-image: url('images/button4.jpg');
            top:214px;
            cursor: pointer;
        }
        .text3{
            height: 239px;
            width: 1200px;
            position: absolute;
            top:346px;
        }
        .text3-1{
            height: 239px;
            width: 486px;
            position: absolute;
            top:0px;
            left:0px;
        }
        .text3-1-1{
            height:34px;
            width: 486px;
            position: absolute;
            border-bottom: 2px solid #a2a2a2;
        }
        .text3-1-1-1{
            height: 34px;
            width: 81px;
            font-size: 18px;
            font-weight: bold;
            line-height: 34px;;
            color:#5e5e5e;
            position: absolute;
            top:0px;
            left:0px;
        }
        .text3-1-1-2{
            height: 34px;
            width: 378px;
            font-size: 13px;
            font-weight: normal;
            line-height: 34px;
            color:#428cd1;
            position: absolute;
            top:0px;
            left:81px;
        }
        .text3-1-1-3{
            height: 34px;
            width: 21px;
            position: absolute;
            top:0px;
            left:459px;
            background-image: url('images/icon.jpg');
            cursor: pointer;
        }
        .text3-1-2{
            width: 480px;
            height: 204px;
            position: absolute;
            top:34px;
            left:10px;
        }
        .text3-2{
            height: 239px;
            width: 337px;
            position: absolute;
            top:0px;
            left:506px;
        }
        .text3-2-1{
            height:34px;
            width: 337px;
            position: absolute;
            border-bottom: 2px solid #a2a2a2;
        }
        .text3-2-1-1{
            height: 34px;
            width: 78px;
            font-size: 18px;
            font-weight: bold;
            line-height: 34px;;
            color:#5e5e5e;
            position: absolute;
            top:0px;
            left:0px;
        }
        .text3-2-1-2{
            height: 34px;
            width: 235px;
            font-size: 13px;
            font-weight: normal;
            line-height: 34px;
            color:#428cd1;
            position: absolute;
            top:0px;
            left:78px;
        }
        .text3-2-1-3{
            height: 34px;
            width: 21px;
            position: absolute;
            top:0px;
            left:313px;
            background-image: url('images/icon.jpg');
            cursor: pointer;
        }
        .text3-2-2{
            width: 330px;
            height: 204px;
            position: absolute;
            top:34px;
            left:10px;
        }
        .text3-3{
            height: 239px;
            width: 337px;
            position: absolute;
            top:0px;
            left:863px;
        }
        .text3-3-1{
            height:34px;
            width: 337px;
            position: absolute;
            border-bottom: 2px solid #a2a2a2;
        }
        .text3-3-1-1{
            height: 34px;
            width: 78px;
            font-size: 18px;
            font-weight: bold;
            line-height: 34px;;
            color:#5e5e5e;
            position: absolute;
            top:0px;
            left:0px;
        }
        .text3-3-1-2{
            height: 34px;
            width: 235px;
            font-size: 13px;
            font-weight: normal;
            line-height: 34px;
            color:#428cd1;
            position: absolute;
            top:0px;
            left:78px;
        }
        .text3-3-1-3{
            height: 34px;
            width: 21px;
            position: absolute;
            top:0px;
            left:313px;
            background-image: url('images/icon.jpg');
            cursor: pointer;
        }
        .text3-3-2{
            width: 330px;
            height: 204px;
            position: absolute;
            top:34px;
            left:10px;
        }
        .blank1{
            height: 5px;
        }
        .font4-1{
            font-size: 15px;
            color: #222222;
            line-height: 23px;
            font-family: 'microsoft yahei';
            cursor: pointer;
        }
        .font4-1:hover{
            color:rgb(195, 4, 4);
        }
        .font4-2{
            height: 23px;
            width: 40px;
            font-size: 12px;
            color: #a2a2a2;
            line-height: 25px;
            position: absolute;
            right: 0px;
        }
        .picture3{
            height: 165px;
            width: 1200px;
            position: absolute;
            top:585px;
        }
        .title3{
            height: 34px;
            width: 1200px;
            border-bottom: 1px solid #a2a2a2;
            position: absolute;
            top:0px;
            left:0px;
        }
        .title3-1{
            height: 34px;
            width: 87px;
            font-size: 18px;
            font-weight: bold;
            line-height: 34px;;
            color:#5e5e5e;
            position: absolute;
            top:0px;
            left:0px;
        }
        .title3-2{
            height: 34px;
            width: 1088px;
            font-size: 13px;
            font-weight: normal;
            line-height: 34px;
            color:#428cd1;
            position: absolute;
            top:0px;
            left:87px;
        }
        .title3-3{
            height: 34px;
            width: 21px;
            position: absolute;
            top:0px;
            left:1175px;
            background-image: url('images/icon.jpg');
            cursor: pointer;
        }
        .img{
            height: 130px;
            width: 1200px;
            position: absolute;
            top:36px;
            left:0px;
        }
        .tail{
            height:155px;
            width: 1263px;
            position: absolute;
            top:1333px;
        }
        .blank2{
            height:37px;
            width: 1263px;
        }
        .end{
            height: 118px;
            width: 1263px;
            background-color: rgb(0,90,153);
        }
        .text5{
            height: 78px;
            width: 480px;
            position: absolute;
            top:50px;
            left: 396px;
        }
        .font5{
            font-size: 14px;
            color: white;
            text-align: center;
            display: block;
        }
    </style>
</head>
<body>
    <div class="myHead">
        <input type="text" placeholder="请输入关键字" class="input1">
        <input type="button" value="搜索" class="input2">
    </div>
    <img src="images/img0.jpg" alt="" class="picture1">
    <div class="table">
        <div class="title1">学院动态</div>
        <div class="title2">NEWS</div>
        <div class="icon"></div>
        <img src="images/img3.jpg" alt="" class="picture2">
        <div class="b">
            <div class="bu b1">1</div>
            <div class="bu b2">2</div>
            <div class="bu b3">3</div>
            <div class="bu b4">4</div>
            <div class="bu b5">5</div>
        </div>
        <div class="text0">学院召开研究生教育工作专题研讨会</div>
        <div class="text1">
            <div class="text2">
                <div>
                    <span class=" font2 text1-1">&nbsp“研”途有我 | 我院举行2024届考研学生复试指…</span>
                    
                    <span class="font3">03-06</span>
                </div><hr>
                <div>
                    <span class=" font2 text1-1">&nbsp上好“开学第一课” ——计算机与信息学院开…</span>
                    <span class="font3">03-04</span>
                </div><hr>
                <div>
                    <span class=" font2 text1-1">&nbsp计算机与信息学院召开2024年春季学期 “三全育…</span>
                    <span class="font3">03-01</span>
                </div><hr>
                <div>
                    <span class=" font2 text1-1">&nbsp我校电子信息硕士学位授权店全票通过专项核验</span>
                    <span class="font3">01-25</span>
                </div><hr>
                <div>
                    <span class=" font2 text1-1">&nbsp计算机与信息学院召开2021级考研就业动员大会</span>
                    <span class="font3">01-09</span>
                </div><hr>
                <div>
                    <span class=" font2 text1-1">&nbsp我院开展 “感受艺术魅力，弘扬时代精神” 主题…</span>
                    <span class="font3">01-04</span>
                </div><hr>
            </div>
        </div>
        <div class="tool">
            <div class="button1"></div>
            <div class="button2"></div>
            <div class="button3"></div>
            <div class="button4"></div>
        </div>
        <div class="text3">
            <div class="text3-1">
                <div class="text3-1-1">
                    <div class="text3-1-1-1">通知公告</div>
                    <div class="text3-1-1-2">ANNOUNCEMENT</div>
                    <div class="text3-1-1-3"></div>
                </div>
                <div class="text3-1-2">
                    <div>
                        <div class="blank1"></div>
                        <span class="font4-1">三峡大学计算机与信息学院诚聘海内外优秀博士</span><span class="font4-2">06-21</span>
                        <div class="blank1"></div>
                        <span class="font4-1">关于召开3月份安全教育主题班会的通知</span><span class="font4-2">03-12</span>
                        <div class="blank1"></div>
                        <span class="font4-1">关于召开学院处级领导班子和领导干部2023年度述职述廉大…</span><span class="font4-2">03-11</span>
                        <div class="blank1"></div>
                        <span class="font4-1">关于召开2024年春季学期“三全育人”班主任工作会的通知</span><span class="font4-2">02-27</span>
                        <div class="blank1"></div>
                        <span class="font4-1">关于召开2024年春季学期“开学第一课”主题班会的通知</span><span class="font4-2">02-23</span>
                        <div class="blank1"></div>
                        <span class="font4-1">关于召开学院全体教职工大会的通知</span><span class="font4-2">01-16</span>
                        <div class="blank1"></div>
                        <span class="font4-1">关于认真做好2024年寒假期间学生教育管理工作的通知</span><span class="font4-2">01-15</span>
                    </div>
                </div>
            </div>
            <div class="text3-2">
                <div class="text3-2-1">
                    <div class="text3-2-1-1">学术动态</div>
                    <div class="text3-2-1-2">ACADEMIC</div>
                    <div class="text3-2-1-3"></div>
                </div>
                <div class="text3-2-2">
                    <div class="blank1"></div>
                    <span class="font4-1">研究生罗智明荣获武汉计算机软件工程…</span><span class="font4-2">12-18</span>
                    <div class="blank1"></div>
                    <span class="font4-1">魏宁博士研究成果在国际知名期刊《IE…</span><span class="font4-2">11-13</span>
                    <div class="blank1"></div>
                    <span class="font4-1">孙航博士在遥感与地球科学领域国际顶…</span><span class="font4-2">10-07</span>
                    <div class="blank1"></div>
                    <span class="font4-1">【计信讲坛】&nbsp第121讲&nbsp滇东北地区三维…</span><span class="font4-2">09-21</span>
                    <div class="blank1"></div>
                    <span class="font4-1">学术讲座&nbsp智能6G网络资源管理</span><span class="font4-2">04-17</span>
                    <div class="blank1"></div>
                    <span class="font4-1">学术讲座&nbsp基于无网格压缩感知的…</span><span class="font4-2">03-23</span>
                    <div class="blank1"></div>
                    <span class="font4-1">[计信讲坛]&nbsp第118讲&nbsp电极-电解质固液…</span><span class="font4-2">03-22</span>

                </div>
            </div>
            <div class="text3-3">
                <div class="text3-3-1">
                    <div class="text3-3-1-1">就业信息</div>
                    <div class="text3-3-1-2">EMPLOYMENT</div>
                    <div class="text3-3-1-3"></div>
                </div>
                <div class="text3-3-2">
                    <div class="blank1"></div>
                    <span class="font4-1">我在小冰等你来【实习生招聘专场】</span><span class="font4-2">01-12</span>
                    <div class="blank1"></div>
                    <span class="font4-1">2024宇视科技校招</span><span class="font4-2">10-23</span>
                    <div class="blank1"></div>
                    <span class="font4-1">深信服24届秋招岗位超前放送，领跑X计</span><span class="font4-2">10-18</span>
                    <div class="blank1"></div>
                    <span class="font4-1">关于2024年度考试录用公务员公告解读</span><span class="font4-2">10-16</span>
                    <div class="blank1"></div>
                    <span class="font4-1">浙江大华技术股份有限公司</span><span class="font4-2">09-18</span>
                    <div class="blank1"></div>
                    <span class="font4-1">恒生电子2024校园招聘-三峡大学专场宣</span><span class="font4-2">09-12</span>
                    <div class="blank1"></div>
                    <span class="font4-1">三峡大学计算机与信息学院2023届毕业生</span><span class="font4-2">04-02</span>
                </div>
            </div>
        </div>
        <div class="picture3">
            <div class="title3">
                <div class="title3-1">相关链接</div>
                <div class="title3-2">RELATED LINKS</div>
                <div class="title3-3"></div>
                <img src="images/img8.jpg" alt="" class="img">
            </div>
        </div>
    </div>
    <div class="froms">
        <ul>
            <li class="font1 from from1">首页</li>
            <li class="font1 from from2">学院概况
                <ul class="ul1">
                    <li class="from-li">学院简介</li>
                    <li class="from-li">学院领导</li>
                    <li class="from-li">机构设施</li>
                    <li class="from-li">发展规划</li>
                    <li class="from-li">宣传视频</li>
                </ul>
            </li>
            <li class="font1 from from3">学院动态
                <ul class="ul2">
                    <li class="from-li">学院动态</li>
                    <li class="from-li">通知公告</li>
                    <li class="from-li">行业新闻</li>
                    <li class="from-li">视频新闻</li>
                </ul>
            </li>
            <li class="font1 from from4">师资队伍
                <ul class="ul3">
                    <li class="from-li">师资概况</li>
                    <li class="from-li">教师列表</li>
                </ul>
            </li>
            <li class="font1 from from5">本科生培养
                <ul class="ul4">
                    <li class="from-li">部门概况</li>
                    <li class="from-li">考试专栏</li>
                    <li class="from-li">专业介绍</li>
                    <li class="from-li">实践教学</li>
                    <li class="from-li">文件下载</li>
                    <li class="from-li">本科教务</li>
                    <li class="from-li">留学生教务</li>
                </ul>
            </li>
            <li class="font1 from from6">研究生培养
                <ul class="ul5">
                    <li class="from-li">部门概况</li>
                    <li class="from-li">最新公告</li>
                    <li class="from-li">学位点简介</li>
                    <li class="from-li">招生信息</li>
                    <li class="from-li">教师风采</li>
                    <li class="from-li">研究生教育</li>
                    <li class="from-li">培养管理</li>
                    <li class="from-li">学位管理</li>
                    <li class="from-li">学工动态</li>
                    <li class="from-li">培养方案</li>
                    <li class="from-li">教学大纲</li>
                    <li class="from-li">文件下载</li>
                </ul>
            </li>
            <li class="font1 from from7">学科建设
                <ul class="ul6">
                    <li class="from-li">学术动态</li>
                    <li class="from-li">重点学科</li>
                    <li class="from-li">基地建设</li>
                    <li class="from-li">学术团队</li>
                    <li class="from-li">学位点建设</li>
                </ul>
            </li>
            <li class="font1 from from8">科学研究
                <ul class="ul7">
                    <li class="from-li">部门概况</li>
                    <li class="from-li">研究方向</li>
                    <li class="from-li">最新公告</li>
                    <li class="from-li">科研政策</li>
                    <li class="from-li">科研项目</li>
                    <li class="from-li">科研成果</li>
                </ul>
            </li>
            <li class="font1 from from9">党建工作
                <ul class="ul8">
                    <li class="from-li">部门概况</li>
                    <li class="from-li">党建动态</li>
                    <li class="from-li">组织机构</li>
                    <li class="from-li">支部建设</li>
                    <li class="from-li">党员风采</li>
                    <li class="from-li">学习资料</li>
                    <li class="from-li">党校培训</li>
                    <li class="from-li">表格下载</li>
                    <li class="from-li">党风廉政</li>
                    <li class="from-li">创先争优</li>
                </ul>
            </li>
            <li class="font1 from from10">学生工作
                <ul class="ul9">
                    <li class="from-li">学工概况</li>
                    <li class="from-li">学工动态</li>
                    <li class="from-li">招生动态</li>
                    <li class="from-li">留学生动态</li>
                    <li class="from-li">规章制度</li>
                    <li class="from-li">就业信息</li>
                    <li class="from-li">奖贷助勤</li>
                    <li class="from-li">科技创新</li>
                    <li class="from-li">学生荣誉</li>
                    <li class="from-li">思政课堂</li>
                    <li class="from-li">团委学生会</li>
                    <li class="from-li">科技社团</li>
                    <li class="from-li">活动广场</li>
                    <li class="from-li">下载专区</li>
                    <li class="from-li">学生成果展</li>
                    <li class="from-li">青年志愿者</li>
                </ul>
            </li>
            <li class="font1 from from11">教工之家
                <ul class="ul10">
                    <li class="from-li">工会概况</li>
                    <li class="from-li">工会活动</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="tail">
        <div class="blank2"></div>
        <div class="end">
            <span class="text5">
                <span class="font5">CopyRights&nbsp©2007-2008&nbspAll&nbspRights&nbspReserved 三峡大学计算机与信息学院</span>
                <br>
                <span class="font5">电&nbsp话：(0717)6393156&nbsp&nbsp&nbsp邮&nbsp编：443002</span>
                <br>
                <span class="font5">地&nbsp址：湖北省宜昌市大学路8号&nbsp&nbsp电子邮件：jsjyb@ctgu.edu.cn</span>
            </span>
        </div>
    </div>
    <script>
        //轮播图1
        const p1=document.querySelector('.picture1')
        let num1=0;
        setInterval(function () {
            num1=(num1+1)%3;
            p1.src=`images/img${num1}.jpg`
        }, 5000)
        //下拉列表
        const from=document.querySelectorAll('.from');
        for(let i=0;i<from.length;i++){
            from[i].addEventListener('mouseenter',function(){
                this.style.backgroundColor='rgb(11,98,193)';
                this.style.color='white';
                if(i!=0){
                    const ul=this.children[0];
                    ul.style.display='block';
                }
            });
            from[i].addEventListener('mouseleave',function(){
                this.style.backgroundColor='white';
                this.style.color='rgb(100,100,101)';
                if(i!=0){
                    const ul=this.children[0];
                    ul.style.display='none';
                }
            });
        }
        //轮播图2
        let a=['学院召开研究生教育工作专题研讨会','我院学生在全国大学生嵌入式芯片与系统设计竞赛中荣获佳绩','计算机与信息学院召开“情系三大，筑梦计信”校友座谈会','学院召开2024届毕业生班主任工作会暨考研就业工作布置会','当十八岁遇见一百岁，校长喊你过成人礼'];
        const p2=document.querySelector('.picture2');
        const text=document.querySelector('.text0');
        const b=document.querySelectorAll('.bu');
        let index=0;
        function fn(){
            index=(index+1)%5;
            p2.src=`images/img${index+3}.jpg`;
            text.innerHTML=a[index];
            for(let i=0;i<5;i++){
                b[i].style.backgroundColor='rgb(102,102,102)';
            }
            b[index].style.backgroundColor='rgb(241,123,10)';
        }
        let n=setInterval(fn,4000); 
        for(let i=0;i<b.length;i++){
            b[i].addEventListener('mouseenter',function(){
                if(i!=index){
                    b[i].style.backgroundColor='rgb(153,153,153)'
                }
            })
            b[i].addEventListener('mouseleave',function(){
                if(i!=index){
                    b[i].style.backgroundColor='rgb(102,102,102)'
                }
            })
            b[i].addEventListener('click',function(){
                clearInterval(n);
                n=setInterval(fn,4000); 
                index=i-1;
                fn();
            },false)
        }
    </script>
</body>
</html>